<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>履约系统</title>
    <link rel="shortcut icon" href="./src/assets/logo1.png"/>
  </head>
  <body>
    <div id="app">
        <div class="containers">
            <div class="loader" style="--r: 1">
                <span style="--i: 1"></span>
                <span style="--i: 2"></span>
                <span style="--i: 3"></span>
                <span style="--i: 4"></span>
                <span style="--i: 5"></span>
                <span style="--i: 6"></span>
                <span style="--i: 7"></span>
                <span style="--i: 8"></span>
                <span style="--i: 9"></span>
                <span style="--i: 10"></span>
                <span style="--i: 11"></span>
                <span style="--i: 12"></span>
                <span style="--i: 13"></span>
                <span style="--i: 14"></span>
                <span style="--i: 15"></span>
                <span style="--i: 16"></span>
                <span style="--i: 17"></span>
                <span style="--i: 18"></span>
                <span style="--i: 19"></span>
                <span style="--i: 20"></span>
            </div>
            <div class="loader" style="--r: 2">
                <span style="--i: 1"></span>
                <span style="--i: 2"></span>
                <span style="--i: 3"></span>
                <span style="--i: 4"></span>
                <span style="--i: 5"></span>
                <span style="--i: 6"></span>
                <span style="--i: 7"></span>
                <span style="--i: 8"></span>
                <span style="--i: 9"></span>
                <span style="--i: 10"></span>
                <span style="--i: 11"></span>
                <span style="--i: 12"></span>
                <span style="--i: 13"></span>
                <span style="--i: 14"></span>
                <span style="--i: 15"></span>
                <span style="--i: 16"></span>
                <span style="--i: 17"></span>
                <span style="--i: 18"></span>
                <span style="--i: 19"></span>
                <span style="--i: 20"></span>
            </div>

            <div class="loader" style="--r: 3">
                <span style="--i: 1"></span>
                <span style="--i: 2"></span>
                <span style="--i: 3"></span>
                <span style="--i: 4"></span>
                <span style="--i: 5"></span>
                <span style="--i: 6"></span>
                <span style="--i: 7"></span>
                <span style="--i: 8"></span>
                <span style="--i: 9"></span>
                <span style="--i: 10"></span>
                <span style="--i: 11"></span>
                <span style="--i: 12"></span>
                <span style="--i: 13"></span>
                <span style="--i: 14"></span>
                <span style="--i: 15"></span>
                <span style="--i: 16"></span>
                <span style="--i: 17"></span>
                <span style="--i: 18"></span>
                <span style="--i: 19"></span>
                <span style="--i: 20"></span>
            </div>

            <div class="loader" style="--r: 4">
                <span style="--i: 1"></span>
                <span style="--i: 2"></span>
                <span style="--i: 3"></span>
                <span style="--i: 4"></span>
                <span style="--i: 5"></span>
                <span style="--i: 6"></span>
                <span style="--i: 7"></span>
                <span style="--i: 8"></span>
                <span style="--i: 9"></span>
                <span style="--i: 10"></span>
                <span style="--i: 11"></span>
                <span style="--i: 12"></span>
                <span style="--i: 13"></span>
                <span style="--i: 14"></span>
                <span style="--i: 15"></span>
                <span style="--i: 16"></span>
                <span style="--i: 17"></span>
                <span style="--i: 18"></span>
                <span style="--i: 19"></span>
                <span style="--i: 20"></span>
            </div>
        </div>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
<style>
::-webkit-scrollbar{
    width:8px;
    height:8px;
}
::-webkit-scrollbar-track{
    background: #f6f6f6;
    border-radius:2px;
}
::-webkit-scrollbar-thumb{
    background: #cdcdcd;
    border-radius:5px;
}
::-webkit-scrollbar-thumb:hover{
    background: #747474;
}
::-webkit-scrollbar-corner {
    background: #f6f6f6;
}
.containers {
    min-height: 100vh;
    background-color: #042104;
    filter: hue-rotate(90deg);

    display: flex;
    justify-content: center;
    align-items: center;
}

.loader {
    position: relative;
    transform: rotate(calc(var(--r) * 45deg));
}

.loader span {
    position: absolute;
    top: 0;
    left: -200px;

    width: 200px;
    height: 2px;
    transform-origin: right;
    transform: rotate(calc(var(--i) * 18deg));
}

.loader span::before {
    content: "";
    display: block;

    width: 15px;
    height: 15px;
    background-color: #00ff0a;
    border-radius: 15px;
    box-shadow: 0 0 10px #00ff0a,
    0 0 20px #00ff0a,
    0 0 40px #00ff0a,
    0 0 60px #00ff0a,
    0 0 80px #00ff0a, 0 0 100px #00ff0a;
    animation: animate 5s linear infinite;
    animation-delay: calc(-0.5s * var(--i));
}
@keyframes animate {
    0% {
        transform: translateX(200px) scale(1);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translateX(0) scale(0);
        opacity: 1;
    }
}



@media screen and (max-width: 576px) {
    .container .loader {
        scale: .6;
    }
}

</style>
